<template>
  <div>
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
      >
        <el-form-item label="角色名称">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入角色名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.status"
            placeholder="全部"
            clearable
          >
            <el-option
              label="启用"
              :value="1"
            ></el-option>
            <el-option
              label="禁用"
              :value="0"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right:15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <el-button
        size="small"
        class="add-btn"
        icon="el-icon-plus"
        v-if="$hasMethod('#add')"
        @click="openAddDialog()"
      >添加角色</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      v-show="tableData.length > -1"
    >
      <el-table-column
        align="center"
        prop="id"
        label="编号"
        width="70"
      />
      <el-table-column
        align="center"
        prop="title"
        label="角色名称"
      />
      <el-table-column
        align="center"
        prop="create_time"
        label="创建时间"
      />
      <el-table-column
        align="center"
        prop="status"
        label="状态"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.rules!=='*' && $hasMethod('#enable')"
            class="pointer"
            @click="changeStatus(scope.row.id, scope.row.status)"
            :type="scope.row.status == 1 ? 'success' : 'danger'"
          >{{scope.row.status == 1 ? "启用" : "禁用"}}</el-tag>
          <el-tag
            v-else
            :type="scope.row.status == 1 ? 'success' : 'danger'"
          >{{scope.row.status == 1 ? "启用" : "禁用"}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.rules!=='*' && $hasMethod('#edit')"
            type="primary"
            size="mini"
            @click="openAddDialog(scope.row)"
          >编辑</el-button>
          <el-button
            v-if="scope.row.rules!=='*' && $hasMethod('#delete')"
            type="danger"
            size="mini"
            @click="removeItem(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    ></custom-page>
    <add-dialog
      ref="addDialog"
      :edit-item="editItem"
      :menu-data="menuData"
      @getList="getList"
    ></add-dialog>
  </div>
</template>

<script>
import { groupList, setGroup, delGroup } from "@/api/system";
import customPage from "@/components/customPage";
import addDialog from "./add";
import { mapGetters } from 'vuex'
export default {
  components: { customPage, addDialog },
  data() {
    return {
      searchForm: {
        title: "",
        status: null
      },
      total: 0,
      tableData: [],
      editItem: null,
      menuData: []
    }
  },
  methods: {
    // 删除
    removeItem(id) {
      this.$confirm('您确定要删除角色吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        delGroup(id).then(res => {
          this.getList(true);
        });
      }).catch(() => { });
    },
    // 添加/编辑账号
    openAddDialog(val) {
      this.editItem = val || null;
      this.$refs.addDialog.dialogVisible = true;
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1;
      this.getList();
    },
    // 重置
    reset() {
      this.searchForm = {
        title: "",
        status: null
      };
      this.getList();
    },
    // 启用/禁用
    changeStatus(id, status) {
      let tip = "";
      if (status == 1) {
        tip = "<span class='red-font'>当前角色有账号关联，禁用会造成账号失去权限</span><br><span>您确定要禁用角色吗？</span>"
      } else {
        tip = "<span>您确定要启用角色吗？</span>"
      }
      this.$confirm(tip, status == 1 ? '禁用角色' : '启用角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true
      }).then(() => {
        setGroup({
          id,
          status: status == 1 ? 0 : 1
        }).then(res => {
          this.getList(true);
        });
      }).catch(() => { });
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage;
      if (!flag) {
        this.tableData = [];
      }
      groupList({
        page,
        pageSize,
        status: this.searchForm.status === null ? -100 : this.searchForm.status,
        title: this.searchForm.title
      }).then(res => {
        this.tableData = res.data || [];
        this.total = res.total;
      })
    }
  },
  mounted() {
    this.getList();
    this.menuData = this.rule || [];
  },
  computed: {
    ...mapGetters([
      'rule'
    ])
  }
}
</script>

<style lang="scss">
</style>
